<template>
    <div>
        <!-- 岗位管理 -->
        <!-- 一键清空input输入框： clearable -->
        <!-- 内容超过行则……：show-overflow-tooltip -->
        <form class="Topfrom">
            <label class="labelYs">岗位编码</label>
            <el-input v-model="postCode" clearable class="TopInput" placeholder="请输入岗位编码" />
            <label class="labelYs">岗位名称</label>
            <el-input v-model="postName" clearable class="TopInput" placeholder="请输入岗位名称" />
            <label class="labelYs">状态</label>
            <el-select v-model="status" placeholder="岗位状态" class="TopInput">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button :icon="Search" type="primary" class="SearchButton" @click="loadData">搜素</el-button>
        </form>
        <div class="TopbuttonDiv">
            <el-button type="primary" class="Topbutton" plain v-perm:slm:slm_structure:posts:insert="insert">
                <el-icon>
                    <Plus />
                </el-icon>
                新增</el-button>
            <el-button type="success" v-perm:slm:slm_structure:posts:update="update" plain
                :disabled="!isSingleRowSelected" class="Topbutton">
                <el-icon>
                    <EditPen />
                </el-icon>
                修改</el-button>
            <el-button type="danger" v-perm:slm:slm_structure:posts:remove="remove" plain
                :disabled="!areRowsSelected" class="Topbutton">
                <el-icon>
                    <Delete />
                </el-icon>
                删除</el-button>
        </div>
        <!-- @selection-change：事件监听 -->
        <el-table :data="page.records" stripe @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <!-- <el-table-column type="index" width="50" /> -->
            <el-table-column label="岗位编号" prop="postId" align="center">
            </el-table-column>
            <el-table-column label="岗位编码" prop="postCode" align="center">
            </el-table-column>
            <el-table-column label="岗位名称" prop="postName" align="center">
            </el-table-column>
            <el-table-column label="岗位排序" prop="postSort" align="center">
            </el-table-column>
            <el-table-column label="岗位状态" prop="status" align="center">
                <template v-slot="scope">
                    <span v-if="scope.row.status == '0'">正常</span>
                    <span v-if="scope.row.status == '1'">停用</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <!-- text:按钮去除边框 -->
                <!-- 修改图标：<el-icon><EditPen /></el-icon> -->
                <!-- 删除图标: <el-icon><Delete /></el-icon> -->
                <!-- 新增图标：<el-icon><Plus /></el-icon> -->
                <template #default="scope">
                    <el-button :row="scope.row" text type="primary" v-perm:slm:slm_structure:posts:update="update2">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        修改</el-button>
                    <el-button :row="scope.row" text type="primary" v-perm:slm:slm_structure:posts:remove="remove2">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>

        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="page.current" v-model:page-size="page.size"
                :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>

</template>

<script setup>
import { ref, computed } from 'vue'
import router from '@/router'
import request from '@/api/request'
//搜素按钮图标
import { Search } from '@element-plus/icons-vue'
//input输入框
const postCode = ref('')
const postName = ref('')
const status = ref('')

//下拉框
let options = [
    {
        label: "正常",
        value: "0"
    },
    {
        label: "停用",
        value: "1"
    }
]

let visible = ref(false)
let title = ref("")
let data = ref({})

//分页参数
let page = ref({
    records: [],
    total: 0,
    size: 2,
    current: 1
})
let selectedRows = ref([]);//用于存储选中的行
let handleSelectionChange = (rows) => {//用于处理表格选择变化
    selectedRows.value = rows;
}
// 判断是否选中了一行
let isSingleRowSelected = computed(() => selectedRows.value.length === 1);
// 判断是否选中了至少一行
let areRowsSelected = computed(() => selectedRows.value.length > 0);

let loadData = () => {
    request({
        url: '/slm/posts/find',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            postCode: postCode.value,
            postName: postName.value,
            status: status.value ? status.value : ""
        }
    }).then(resp => {
        console.log(resp.data); // 打印返回的数据结构
        if (resp.data && resp.data.records) {
            page.value.records = resp.data.records;
            page.value.total = resp.data.total;
        } else {
            console.error('数据格式不正确', resp.data);
        }
    }).catch(err => {
        console.error('请求失败', err);
    });
}

let handleCurrentChange = (newPage) => {
    page.value.current = newPage
    loadData();
}

let handleSizeChange = (newSize) => {
    page.value.size = newSize
    page.value.current = 1;
    loadData();
}

let insert = (menu) => {
    title.value = menu.menuName
    visible.value = true;
    // console.log(menu)
    router.push(menu.path)
}

let update2 = (menu, row) => {
    title.value = menu.menuName
    visible.value = true;
    data.value = row
    // console.log(row)
    router.push(menu.path)
}
let update = (menu) => {
    if (selectedRows.value.length === 1) {
        const row = selectedRows.value[0];
        title.value = menu.menuName
        visible.value = true;
        data.value = row
        // console.log(row)
        router.push(menu.path)
    }

}

let remove = (menu) => {
    if (selectedRows.value.length > 0) {
        const postId = selectedRows.value.map(row => row.postId);
        console.log(postId)
        request({
            url: 'slm/posts/deleteT/',
            method: 'delete',
            data: postId// 确保请求体是一个数组
        }).then(resp => {
            loadData();
        })
    }
}
let remove2 = (menu, row) => {
    console.log(row)
    request({
        url: 'slm/posts/delete/' + row.postId,
        method: 'delete'
    }).then(resp => {
        loadData();
    })
}
//关闭窗口刷新（立即按钮）
let close = () => {
    visible.value = false;
    loadData();
}

loadData();
</script>

<style scoped>
.demo-pagination-block {
    margin-top: 25px;
    margin-bottom: 16px;
}

/* 表单上方label */
.labelYs {
    font-size: 14px;
    font-weight: 700;
    color: #606266;
}

/* 表单上方输入框 */
.TopInput {
    width: 205px;
    padding: 0px 0px 0px 12px;
    margin-top: 18px;
    margin-bottom: 18px;
    margin-right: 12px;
}

.MonmyInput {
    width: 120px;
    padding-left: 12px;
}

.SearchButton {
    margin: 0px 0px 0px 12px;
}

/* 表单上方按钮 */
.Topbutton {
    margin: 0px 12px 0px 0px;
}

.TopbuttonDiv {
    margin-bottom: 8px;
}

.Topfrom {
    /* display: inline-block; */
    margin-bottom: 18px;
}
</style>
